<template>
	<view class="container">
		<van-field
			clearable
			clickable
			label="搜索"
			left-icon="search"
			placeholder="输入音频名字哦~"
			label-align="center"
			border
			class="my-field-search"
			ref="inputAudioFileNameFilter"
			@input="searchListFilterListener"
		/>
	</view>
	<scroll-view @scroll="scrollChange" class="container-scroll-list" enable-flex enhanced scroll-y :show-scrollbar="false">
		<view class="container-scroll-list-content">
			<van-button v-for="(item, index) in (tempSearchFilterInputText !== '' ? tempSearchFilterList : audioFileList)" :key="index" 
				class="my-button-item" color="linear-gradient(to right, #efefef, #dcdcdc)"
				@mousedown="handleMouseDown"
				@mouseup="handleMouseUp"
				@touchstart="handleMouseDown"
				@touchend="handleMouseUp"
				@click="showPopupBottomEditView ? selectItem(item, index) : openPlayView(item, index)"
			>
				<van-icon name="music-o"/>
				<view class="my-button-item-content-text">
					<view class="my-button-item-content-text-audio-name">{{ item.name }}</view>
					<view class="my-button-item-content-text-audio-date">
						<view class="my-button-item-content-text-audio-date-time">{{ item.time }}</view>
						<view class="my-button-item-content-text-audio-date-ymd">{{ item.date }}</view>
					</view>
				</view>
				<view class="my-button-item-content-text-index">{{ index + 1 }}</view>
				<!-- name = circle & checked -->
				<van-icon v-if="showPopupBottomEditView" class="my-button-item-content-checkbox" :name="item.isChecked ? 'checked' : 'circle'" />
			</van-button>
		</view>
	</scroll-view>
	<!-- 底部弹出编辑窗口 -->
	<van-popup
		v-model:show="showPopupBottomEditView" 
		position="bottom" 
		:overlay="false"
		@leave="clearTempCheckedItemList"
		>
		<view class="container-popup-bottom">
			<van-button @click="selectedAllItem" :square="true" icon="list-switch">全选</van-button>
			<van-button @click="renameAudioFile" :disabled="tempCheckedItemList.length === 0 || tempCheckedItemList.length > 1" :square="true" icon="edit">命名</van-button>
			<van-button @click="deleteAudioFile" :disabled="tempCheckedItemList.length < 1" :square="true" icon="delete-o">删除</van-button>
			<van-button @click="hidePopupBottomEditView" :square="true" icon="cross">取消</van-button>
		</view>
	</van-popup>
	<!-- 播放弹窗 -->
	<van-popup
		v-model:show="showPopupPlayView" 
		position="bottom"
		round
		closeable
		:close-on-click-overlay="false"
		@close="hidePlayView">
		<view class="container-popup-play">
			<view class="popup-play-title">播放录音</view>
			<view class="popup-play-music-info">
				<van-icon name="music" />
				<view>
					<view class="popup-play-music-info-name">
						{{ currentSelectedItem.name }}
					</view>
					<view class="popup-play-music-info-date">
						<view class="popup-play-music-info-date-time">
							{{ currentSelectedItem.time }}
						</view>
						<view class="popup-play-music-info-date-ymd">
							{{ currentSelectedItem.date }}
						</view>
					</view>
				</view>
			</view>
			<view class="container-popup-play-content-slipt"/>
			<view class="popup-bottom-play-container">
				<!-- 重置录音 -->
				<van-button @click="resetAudio" :disabled="playAudioStatus === 0" class="my-button-radius my-button-radius-replay" round type="default">
					<van-icon class="my-button-radius-icon" name="replay"  />
				</van-button>
				<!-- 播放/暂停 -->
				<van-button @click="playAudio" v-show="playAudioStatus === 0 || playAudioStatus === 2" class="my-button-radius my-button-radius-play" round type="default">
					<van-icon class="my-button-radius-icon" name="play-circle-o"  />
				</van-button>
				<van-button @click="pauseAudio" v-show="playAudioStatus === 1" class="my-button-radius my-button-radius-pause" round type="default">
					<van-icon class="my-button-radius-icon" name="pause-circle-o"  />
				</van-button>
				<!-- 停止播放 -->
				<van-button @click="stopAudio" :disabled="playAudioStatus === 0" class="my-button-radius my-button-radius-stop" round type="default">
					<van-icon class="my-button-radius-icon" name="stop-circle-o"  />
				</van-button>
			</view>
		</view>
	</van-popup>
	<!-- 重命名窗口 -->
	<van-popup
		v-model:show="showPopupRenameView"
		position="center"
		round
		closeable
		:close-on-click-overlay="false"
		@close="hideRenameView"
		@after-leave="popupRenameViewHideListener">
		<view class="popup-center-rename-view">
			<view class="popup-center-rename-title">命名录音</view>
			<!-- VantUI 这个双向绑定值，有 BUG 不能绑定，直接调用引用获取，最后的清空用 v-if 销毁和创建 -->
			<van-field
				v-if="showPopupRenameInput"
			    clearable
			    left-icon="smile-o"
			    placeholder="输入音频命名"
				label-align="center"
				border
				class="my-field-rename"
				ref="inputRenameAudioFileName"
			/>
			<view class="my-button-popup-enter-containner">
				<van-button @click="enterRenameAudio" class="my-button-popup-enter-save" color="linear-gradient(to right, #4bb0ff, #6149f6)">确定</van-button>
				<van-button @click="hideRenameView" class="my-button-popup-enter-delete" color="linear-gradient(to right, #d5d5d5, #c3c3c3)">取消</van-button>
			</view>
		</view>
	</van-popup>
</template>

<script>
	export default {
		name:"List",
		options: {
		    styleIsolation: 'shared', //微信开发，共享样式、样式穿透需要开启的属性
		},
		data() {
			return {
				/*
					(录音文件列表信息 （文件数据还是存储在服务端，仅保存信息）)
					文件名
					录音时长
					时间戳
					服务器资源路径
					(以下包含前端需要的自定义属性来改变样式状态)
					isChecked : boolean
				*/
				// audioFileList: [
				// 	{
				// 		name: '空间胶囊',
				// 		date: '00:00.00 2024/6/19'
				// 	},{
				// 		name: '时间胶囊 2024/6/19',
				// 		date: '00:00.00 2024/6/19'
				// 	},{
				// 		name: '未来胶囊 2024/6/19',
				// 		date: '00:00.00 2024/6/19'
				// 	},{
				// 		name: '末日胶囊 2024/6/19',
				// 		date: '00:00.00 2024/6/19'
				// 	},{
				// 		name: '微笑胶囊 2024/6/19',
				// 		date: '00:00.00 2024/6/19'
				// 	},{
				// 		name: '治疗胶囊 2024/6/19',
				// 		date: '00:00.00 2024/6/19'
				// 	},{
				// 		name: '法力胶囊 2024/6/19',
				// 		date: '00:00.00 2024/6/19'
				// 	},{
				// 		name: '超级胶囊 2024/6/19',
				// 		date: '00:00.00 2024/6/19'
				// 	},{
				// 		name: '跳跃胶囊 2024/6/19',
				// 		date: '00:00.00 2024/6/19'
				// 	},{
				// 		name: '无敌胶囊 2024/6/19',
				// 		date: '00:00.00 2024/6/19'
				// 	},{
				// 		name: '量子胶囊 2024/6/19',
				// 		date: '00:00.00 2024/6/19'
				// 	}
				// ],
				audioFileList: this.$store.state.audioFileList,						//------------------------> 先临时使用 strore 共享数据解决，先从本地操作
				tempCheckedItemList: [],				//临时存储选中的项
				handleTimer: null,						//setTimeout 定时任务对象(长按)
				showPopupBottomEditView: false,			//底部编辑弹窗
				sleepTimer: 1000,						//等待长按项时间弹出编辑框(这里用于固定即可)
				tempSearchFilterInputText: '',			//临时搜索框实时监听文本数据
				tempSearchFilterList: [],				//临时搜索框筛选缓存数据
				//这里有个初始化 DOM BUG ，当前进入界面时，调用了我使用插值表达式为 null 的引用，所以这里用预留值对象
				currentSelectedItem: {name: '', time: '', date: '', tempFilePath: ''},				//当前打开下载好的播放音频路径(需要请求服务器获取)
				showPopupPlayView: false,				//弹出播放音频窗口
				playAudioStatus: 0, 					//播放录音，0 停止，1 开始，2 暂停
				innerAudioContext: null,				//播放音频上下文对象 (懒加载)
				showPopupRenameView: false,				//弹出重命名窗口
				showPopupRenameInput: false,			//显示重命名输入框，使用这种方法的原因是清空输入数据
			};
		},
		watch: {
			showPopupBottomEditView(newValue, oldValue) {
				this.$store.state.isShowTabBar = !newValue
			}
		},
		methods: {
			handleMouseDown() {
				if (this.showPopupBottomEditView) return
				this.handleTimer = setTimeout(() => {
					this.showPopupBottomEditView = true
				}, this.sleepTimer)
			},
			handleMouseUp() {
				if (!this.handleTimer) return
				clearTimeout(this.handleTimer)
			},
			hidePopupBottomEditView() {
				this.showPopupBottomEditView = false
			},
			scrollChange(e) {
				this.handleMouseUp()
			},
			openPlayView(item, index) {
				this.currentSelectedItem = item
				this.showPopupPlayView = true
			},
			hidePlayView() {
				this.showPopupPlayView = false
			},
			selectItem(item, index) {
				item.isChecked = !item.isChecked
				if (item.isChecked) { //主要存储时需要判定是否需要存
					var res = this.tempCheckedItemList.find(nextItem => {
						return nextItem === item
					})
					if (!res) {
						this.tempCheckedItemList.push(item)
					}
				} else {
					var index = this.tempCheckedItemList.findIndex(nextItem => {
						return nextItem === item
					})
					if (index > -1) {
						this.tempCheckedItemList.splice(index, 1)
					}
				}
			},
			clearTempCheckedItemList() { //重置源数据选中状态，并清空缓存
				this.tempCheckedItemList.forEach(item => {
					item.isChecked = false
				})
				this.tempCheckedItemList.splice(0, this.tempCheckedItemList.length) //清空缓存
			},
			selectedAllItem() {
				this.clearTempCheckedItemList()
				this.audioFileList.forEach(item => {
					item.isChecked = true
					this.tempCheckedItemList.push(item)
				})
			},
			deleteAudioFile() {
				if (this.tempCheckedItemList.length < 1) return
				this.tempCheckedItemList.forEach(item => {
					var index = this.audioFileList.findIndex(nextItem => {
						return nextItem === item
					})
					if (index > -1) this.audioFileList.splice(index, 1) //移除
				})
				this.tempCheckedItemList.splice(0, this.tempCheckedItemList.length) //清空缓存
				this.hidePopupBottomEditView()	//隐藏弹窗
			},
			renameAudioFile() {
				this.showPopupRenameInput = true
				this.showPopupRenameView = true
			},
			hideRenameView() {
				this.showPopupRenameView = false
			},
			enterRenameAudio() {
				if (this.$refs.inputRenameAudioFileName.value === '') return
				this.tempCheckedItemList[0].name = this.$refs.inputRenameAudioFileName.value
				this.hideRenameView()
				this.hidePopupBottomEditView()
			},
			/**
			 * @param {Object} e
			 * @description 待优化：使用字符串hash或者KMP字符串匹配算法
			 */
			searchListFilterListener(e) { //监听搜索框内容筛选数据
				var tempArray = this.audioFileList.filter(item => {
					return item.name.search(e.detail) > -1
				})
				//这里顺序不能改变，先指定筛选数组，再改变监听变量
				this.tempSearchFilterList = tempArray
				this.tempSearchFilterInputText = e.detail
				console.log(tempArray)
			},
			resetPlayData() { //重置弹出框组件数据
				this.currentSelectedItem = {name: '', time: '', date: '', tempFilePath: ''} //置空源数据缓存
				this.playAudioStatus = 0
				if (this.innerAudioContext) {
					this.innerAudioContext.destroy() //根据官方文档，释放资源避免内存泄漏
					this.innerAudioContext = null //置空
				}
			},
			initAudioContext() { //初始化录音实例(注意这里未设置播放源数据)
				if (!this.innerAudioContext) {
					var audio = wx.createInnerAudioContext()
					this.innerAudioContext = audio
					audio.src = this.currentSelectedItem.tempFilePath //注意要提前创建播放音频实例后再进行之后操作，不然有BUG
					audio.onPlay(() => {
						console.log('播放录音');
					})
					audio.onEnded(() => {
						console.log('onEnded 自动播放结束');
						this.playAudioStatus = 0
					})
					audio.onStop(() => {
						console.log('onStop 手动播放结束');
					})
					audio.onError((errMsg) => {
						console.log('播放失败', errMsg);
					})
				}
			},
			playAudio() {
				if (this.playAudioStatus === 1) return
				this.initAudioContext()
				this.innerAudioContext.play()
				this.playAudioStatus = 1
			},
			pauseAudio() {
				if (this.playAudioStatus !== 1) return
				this.innerAudioContext.pause()
				this.playAudioStatus = 2
			},
			stopAudio() {
				if (this.playAudioStatus === 0) return
				this.innerAudioContext.stop()
				this.playAudioStatus = 0
			},
			resetAudio() {
				this.stopAudio()
				this.playAudio()
			},
			popupRenameViewHideListener() {
				this.showPopupRenameInput = false
			}
		}
	}
</script>

<!-- 搜索框 -->
<style scoped>
.container {
	display: flex;
	justify-content: center;
}
.my-field-search >>> .van-cell.van-cell--clickable {
	width: 95vw;
	height: 90rpx;
	background: linear-gradient(to right, #efefef, #ebebeb);
	display: flex;
	align-items: center;
	margin-top: 20rpx;
	margin-bottom: 10rpx;
	border-radius: 10rpx;
	text-align: center;
}
.my-field-search >>> van-icon {
	font-size: 55rpx;
}
.my-field-search >>> label {
	font-size: 30rpx;
}
.my-field-search >>> input {
	font-size: 30rpx;
}
.my-field-search >>> .van-icon.van-icon-clear {
	font-size: 45rpx;
}
</style>

<!-- 列表项 -->
<style scoped>
.my-button-item >>> .van-button.van-button--default.van-button--normal, 
.my-button-item >>> .van-button__text {
	width: 95vw;
	height: 120rpx;
}
.my-button-item >>> .van-button.van-button--default.van-button--normal {
	border-radius: 20rpx;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
}
.my-button-item >>> van-icon {
	font-size: 55rpx;
	color: black;
	margin-right: 30rpx;
}
.my-button-item >>> .van-button__text {
	display: flex;
}
.my-button-item-content-text {
	color: black;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.my-button-item-content-text-audio-name {
	font-size: 30rpx;
	color: black;
	text-align: left;
	margin-bottom: 10rpx;
}
.my-button-item-content-text-audio-date {
	display: flex;
	font-size: 25rpx;
	color: rgba(120, 120, 120, 1.0);
	text-align: left;
}
.my-button-item-content-text-audio-date-time {
	margin-right: 30rpx;
}
.my-button-item-content-text-audio-date-ymd {
	
}
.my-button-item-content-text-index {
	font-size: 30rpx;
	color: rgba(120, 120, 120, 1.0);
	display: flex;
	align-items: center;
	margin-left: auto;
}
.my-button-item >>> van-icon.my-button-item-content-checkbox {
	margin-left: 15rpx;
	margin-right: 0;
	font-size: 45rpx;
}
/* 未选中状态，这个直接用原型背景颜色，图标为透明 */
.my-button-item-content-checkbox >>> .van-icon.van-icon-circle {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	color: rgba(0, 0, 0, 0);
	background-color: white;
}
.my-button-item-content-checkbox >>> .van-icon.van-icon-checked {
	border-radius: 50%;
	color: rgba(25, 109, 198, 1.0);
}
</style>

<!-- 滚动组件 -->
<style scoped>
.container-scroll-list {
	width: 100vw;
	height: 70vh;
	margin-top: 20rpx;
}
.container-scroll-list-content {
	width: 100vw;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>

<!-- 底部编辑弹窗 -->
<style scoped>
.container-popup-bottom {
	width: 100vw;
	height: 110rpx;
	/* background-color: red; */
	display: flex;
}
.container-popup-bottom >>> van-button {
	flex: 1;
}
.container-popup-bottom >>> button {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.container-popup-bottom >>> .van-button__text {
	font-size: 25rpx;
	color: black;
}
.container-popup-bottom >>> .van-button__icon {
	font-size: 40rpx;
	color: black;
	margin-bottom: 10rpx;
}
</style>

<!-- 播放弹窗 -->
<style scoped>
.container-popup-play {
	width: 100vw;
	height: 500rpx;
	background-color: white;
}
.popup-play-title {
	width: 100%;
	height: 100rpx;
	box-shadow: 0rpx 0rpx 10rpx 3rpx rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 30rpx;
	color: black;
	margin-bottom: 30rpx;
}
.popup-play-music-info {
	width: 100vw;
	height: 90rpx;
	display: flex;
	padding: 20rpx;
}
.popup-play-music-info >>> van-icon {
	font-size: 55rpx;
	margin-left: 20rpx;
	margin-right: 30rpx;
	color: rgba(25, 109, 198, 1.0);
}
.popup-play-music-info-name {
	font-size: 32rpx;
	margin-bottom: 12rpx;
	background: linear-gradient(120deg,
	                red, 
	                orange, 
	                yellow, 
	                green, 
	                blue, 
	                indigo, 
	                violet);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
.popup-play-music-info-date {
	display: flex;
	font-size: 25rpx;
	color: rgba(120, 120, 120, 1.0);
}
.popup-play-music-info-date-time {
	margin-right: 30rpx;
}
.popup-play-music-info-date-ymd {
	
}
.container-popup-play-content-slipt {
	margin: 0 auto;
	width: 95%;
	height: 1rpx;
	background-color: rgba(0, 0, 0, 0.4);
	margin-bottom: 50rpx;
}
</style>

<!-- 底部弹窗的播放按钮 -->
<style scoped>
.popup-bottom-play-container {
	width: 100%;
	display: flex;
	justify-content: center;
}
.my-button-radius {
	margin: 0 20rpx;
}
.my-button-radius >>> .van-button--round {
	border-radius: 50%;
	width: 150rpx;
	height: 150rpx;
}
.my-button-radius-replay >>> .van-button--round {
	background-color: grey;
}
.my-button-radius-play >>> .van-button--round {
	background-color: green;
}
.my-button-radius-stop >>> .van-button--round, 
.my-button-radius-pause >>> .van-button--round {
	background-color: red;
}
.my-button-radius-icon >>> .van-icon.van-icon-replay, 
.my-button-radius-icon >>> .van-icon.van-icon-play-circle-o, 
.my-button-radius-icon >>> .van-icon.van-icon-pause-circle-o, 
.my-button-radius-icon >>> .van-icon.van-icon-stop-circle-o {
	font-size: 55rpx;
	color: white;
}
</style>

<!-- 重命名窗口 -->
<style scoped>
.popup-center-rename-view {
	width: 85vw;
	height: 400rpx;
}
.popup-center-rename-title {
	width: 100%;
	height: 100rpx;
	box-shadow: 0rpx 0rpx 10rpx 3rpx rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 30rpx;
	color: black;
	margin-bottom: 30rpx;
}
.my-field-rename >>> .van-cell {
	width: 95%;
	height: 90rpx;
	margin: 0 auto;
	margin-bottom: 30rpx;
	padding-top: 5rpx;
	padding-bottom: 5rpx;
	border-radius: 25rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: linear-gradient(to right, #efefef, #ebebeb);
}
.my-field-rename >>> .van-cell__left-icon-wrap {
	font-size: 55rpx;
	color: black;
	margin-right: 40rpx;
}
.my-field-rename >>> .van-icon.van-icon-clear {
	font-size: 45rpx;
}
.my-field-rename >>> .van-field__label, .my-field-rename >>> input {
	font-size: 30rpx;
	color: black;
}
.my-button-popup-enter-containner {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 50rpx;
}
.my-button-popup-enter-containner >>> .van-button.van-button--default.van-button--normal {
	width: 200rpx;
	height: 100rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	color: white;
	font-size: 30rpx;
	font-style: normal;
	border-radius: 10%;
}
.my-button-popup-enter-save >>> .van-button.van-button--default.van-button--normal {
	background-color: rgba(0, 123, 255, 1.0);
	border-radius: 20rpx;
}
.my-button-popup-enter-delete >>> .van-button.van-button--default.van-button--normal {
	background-color: grey;
	border-radius: 20rpx;
}
</style>